<template>
  <div>
    <input type="button" v-model="name" value="Tom Cat" @click="tohost">
    <input type="text" v-model="inputValue">
    <button @click="handleAdd">add item</button>
    <ul>
      <Home 
        v-for="(item, index) in list" 
        :key="index" 
        :content="item"
        @click.native="handleDelete(Number(index))">
        {{ item }}
      </Home>
    </ul>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import Home from './components/system/profile/Home.vue';
@Component({
  components: {
    Home
  }
})
export default class App extends Vue {

  @Prop(String) name!: String

  inputValue: String = '';
  list: Array<String> = ['吃饭', '睡觉', '打豆豆'];

  handleAdd(): void {
    const inputValue = this.inputValue;
    this.list.push(inputValue);
    this.inputValue = '';
  }

  handleDelete(index: number): void {
    this.list.splice(index, 1);
  }

  tohost(): void {
    alert(1111)
  }
}
</script>